<ng-form name="form">
  <div class="form-group">
    <label class="required">Type</label>
    <ui-select ng-model="selected.type" required search-enabled="false">
      <ui-select-match>{{$select.selected.label}}</ui-select-match>
      <ui-select-choices repeat="item.id as item in types">{{item.label}}</ui-select-choices>
    </ui-select>
  </div>
  <fieldset ng-if="selected.type === 'httpGet'">
    <div class="form-group">
      <div class="checkbox">
        <label>
          <input
              type="checkbox"
              ng-model="probe.httpGet.scheme"
              ng-true-value=" 'HTTPS' "
              ng-false-value=" 'HTTP' ">
          Use HTTPS
        </label>
      </div>
    </div>
    <div class="form-group">
      <label ng-attr-for="{{id}}-path">Path</label>
      <div>
        <input
            ng-attr-id="{{id}}-path"
            ng-model="probe.httpGet.path"
            type="text"
            placeholder="/"
            autocorrect="off"
            autocapitalize="none"
            spellcheck="false"
            class="form-control">
      </div>
    </div>
    <div class="form-group">
      <label class="required">Port</label>
      <ui-select ng-model="probe.httpGet.port" required>
        <ui-select-match>{{$select.selected.containerPort}}</ui-select-match>
        <ui-select-choices
            repeat="port.containerPort as port in portOptions"
            refresh="refreshPorts($select.search, $select.selected)"
            refresh-delay="200">{{port.containerPort}}</ui-select-choices>
      </ui-select>
    </div>
  </fieldset>
  <fieldset ng-if="selected.type === 'exec'">
    <label class="required">Command</label>
    <edit-command args="probe.exec.command" is-required="true"></edit-command>
  </fieldset>
  <fieldset ng-if="selected.type === 'tcpSocket'">
    <div class="form-group">
      <label class="required">Port</label>
      <ui-select ng-model="probe.tcpSocket.port" required>
        <ui-select-match>{{$select.selected.containerPort}}</ui-select-match>
        <ui-select-choices
            repeat="port.containerPort as port in portOptions"
            refresh="refreshPorts($select.search, $select.selected)"
            refresh-delay="200">{{port.containerPort}}</ui-select-choices>
      </ui-select>
    </div>
  </fieldset>
  <div class="form-group">
    <label ng-attr-for="{{id}}-initial-delay">Initial Delay</label>
    <span class="input-group"
       ng-class="{ 'has-error': form.initialDelaySeconds.$invalid && form.initialDelaySeconds.$touched }">
      <input
          type="number"
          name="initialDelaySeconds"
          ng-model="probe.initialDelaySeconds"
          pattern="\d*"
          min="0"
          select-on-focus
          ng-attr-id="{{id}}-initial-delay"
          class="form-control"
          ng-attr-aria-describedby="{{id}}-delay-description">
      <span class="input-group-addon">seconds</span>
    </span>
    <div class="help-block" ng-attr-id="{{id}}-delay-description">
      How long to wait after the container starts before checking its health.
    </div>
    <div ng-if="form.initialDelaySeconds.$invalid && form.initialDelaySeconds.$touched" class="has-error">
      <div ng-if="form.initialDelaySeconds.$error.number" class="help-block">
        Must be a number.
      </div>
      <div ng-if="form.initialDelaySeconds.$error.min" class="help-block">
        Delay can't be negative.
      </div>
      <span ng-if="form.initialDelaySeconds.$error.pattern && !form.initialDelaySeconds.$error.min" class="help-block">
        Must be a whole number.
      </span>
    </div>
  </div>
  <div class="form-group">
    <label ng-attr-for="{{id}}-timeout">Timeout</label>
    <span class="input-group"
       ng-class="{ 'has-error': form.timeoutSeconds.$invalid && form.timeoutSeconds.$touched }">
      <input
          type="number"
          name="timeoutSeconds"
          ng-model="probe.timeoutSeconds"
          pattern="\d*"
          min="1"
          placeholder="1"
          select-on-focus
          ng-attr-id="{{id}}-timeout"
          class="form-control"
          ng-attr-aria-describedby="{{id}}-timeout-description">
      <span class="input-group-addon">seconds</span>
    </span>
    <div class="help-block" ng-attr-id="{{id}}-timeout-description">
      How long to wait for the probe to finish. If the time is exceeded, the probe is considered failed.
    </div>
    <div ng-if="form.timeoutSeconds.$invalid && form.timeoutSeconds.$touched" class="has-error">
      <div ng-if="form.timeoutSeconds.$error.number" class="help-block">
        Must be a number.
      </div>
      <div ng-if="form.timeoutSeconds.$error.min" class="help-block">
        Timeout must be greater than or equal to one.
      </div>
      <span ng-if="form.timeoutSeconds.$error.pattern && !form.timeoutSeconds.$error.min" class="help-block">
        Must be a whole number.
      </span>
    </div>
  </div>
</ng-form>
